<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <h3>饿了么-系统 信息数据统计</h3>
      <div class="dashboard-text-core">
        <div class="div1">
          <v-chart :options="chartOptions1"></v-chart>
        </div>
        <div class="div2">
          <v-chart :options="chartOptions2"></v-chart>
        </div>
        <div class="div3">
          <v-chart :options="chartOptions3"></v-chart>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import VueECharts from "vue-echarts";
import vCharts from "v-charts";
import "echarts/lib/component/tooltip";
import "echarts/lib/component/title";

import {mapGetters} from "vuex";

export default {
  name: "Dashboard",
  components: {
    "v-chart": VueECharts,
  },
  data() {
    return {
      chartOptions1: {
        title: {
          text: "数据柱状图",
          x: "center",
        },
        tooltip: {
          trigger: "axis", // 轴
        },
        // xAxis：x轴
        xAxis: {
          type: "category",
          data: ["食品", "商家", "订单", "用户", "分类", "甜点", "茶饮"],
        },
        yAxis: {
          type: "value",
        },
        // series: 显示类型：type (bar)、具体的数据:data
        series: {
          type: "bar", // 'bar','line'
          data: [120, 200, 150, 80, 70, 110, 130],
        },
      },
      chartOptions2: {
        title: {
          text: "数据饼图",
          x: "center", // 标题的对齐方式
        },
        tooltip: {
          trigger: "item", // 触发的是饼图块
        },
        // series: 显示类型：type (bar)、具体的数据:data
        series: {
          type: "pie", // 'bar','line'
          data: [
            {
              name: "食品",
              value: 120,
            },
            {
              name: "商家",
              value: 200,
            },
            {
              name: "订单",
              value: 150,
            },
            {
              name: "用户",
              value: 80,
            },
            {
              name: "分类",
              value: 70,
            },
            {
              name: "甜点",
              value: 110,
            },
            {
              name: "茶饮",
              value: 130,
            },
          ],
        },
      },
      chartOptions3: {
        title: {
          text: "数据折线图",
          x: "center",
        },
        tooltip: {
          trigger: "axis", // 轴
        },
        // xAxis：x轴
        xAxis: {
          type: "category",
          data: ["食品", "商家", "订单", "用户", "分类", "甜点", "茶饮"],
        },
        yAxis: {
          type: "value",
        },
        // series: 显示类型：type (bar)、具体的数据:data
        series: {
          type: "line", // 'bar','line'
          data: [120, 200, 150, 80, 70, 110, 130],
        },
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
    display: flex;
    flex-direction: column;
    align-items: center;

    &-core {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      // width: 100%;
      div {
        flex: 1;
        // width: 40%;
      }
    }
  }
}
</style>
